<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听 ref 类型的变量</title>
</head>
<body>
<div id="app">
    <h1>当前点击的次数{{ count }}</h1>
    <button v-on:click="buttonClicked">+</button>
    <hr>
    <h1>当前的消息{{ info }}</h1>
    <button v-on:click="btnClicked">+</button>

</div>
<script type="module">
    import {createApp, ref, watch} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
        setup() {
            let count = ref(0)
            let info = ref("Hello, World!")

            function buttonClicked() {
                count.value = count.value + 1
            }

            function btnClicked() {
                info.value = info.value + "Hello, World!"
            }

            /*// 一次侦听 一个变量
            watch(count, function (newValue, oldValue) {
              console.log("count 值发生了变化");
              console.log("原来的值：" + oldValue);
              console.log("当前的值：" + newValue);

            })

            watch(info, function (newValue, oldValue) {
              console.log("info 值发生了变化");
              console.log("原来的值：" + oldValue);
              console.log("当前的值：" + newValue);

            })*/

            // 一次侦听多个变量，   参数会按照侦听变量的顺序形成数组
            watch([count, info], function (newValue, oldValue) {
                console.log("值发生了变化");
                // console.log("原来的值：" + oldValue);
                // console.log("当前的值：" + newValue);
                console.log(oldValue);
                console.log(newValue);

            })

            return {
                count, buttonClicked, info, btnClicked,
            }
        }
    })

    app.mount("#app")
</script>
</body>
</html>